<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>每日一点 - MRYD.com</title>
    <meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/swiper-3.4.0.jquery.min.js"></script>
    <link href="favicon.ico" type="image/x-icon" rel="icon">
    <link rel="stylesheet" href="/static/css/swiper-3.2.7.min.css"/>
    <link rel="stylesheet" href="/static/css/home.css"/>
    <link rel="stylesheet" href="/static/css/aui.css"/>
    <link rel="stylesheet" href="/static/css/login.css"/>
    <style>
      body{
        margin:0;
        padding:0;
      }
      .container {
        width: 100%;
      }

      .swiper1 {
        width: 100%;
        background: #efefef;
      }

      .swiper1 .selected {
        color: #ec5566;
      }

      .swiper1 .swiper-slide {
        text-align: center;
        font-size: 14px;
        height: 40px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        cursor: pointer;
      }

      .swiper2 {
        width: 100%;
      }

      .swiper2 .swiper-slide {
        height: calc(100vh - 50px);
        color: #fff;
        text-align: center;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
      }
    </style>
  </head>
  <body>
    <div class="container" id="app"></div>
  </body>
</html>
<script src="/static/js/home.js"></script>
<script type="text/javascript">
  $(function() {
    function setCurrentSlide(ele, index) {
      $(".swiper1 .swiper-slide").removeClass("selected");
      ele.addClass("selected");
    }

    var swiper1 = new Swiper('.swiper1',{

      slidesPerView: 5.5,
      paginationClickable: true,
      spaceBetween: 1,
      freeMode: true,
      loop: false,
      observer:true, //修改swiper自己或子元素时，自动初始化swiper
      observeParents:true,//修改swiper的父元素时，自动初始化swipe
      onTab: function(swiper) {
        var n = swiper1.clickedIndex;
      }
    });
    swiper1.slides.each(function(index, val) {
      var ele = $(this);
      ele.on("click", function() {
        setCurrentSlide(ele, index);
        swiper2.slideTo(index, 500, false);
      });
    });

    var swiper2 = new Swiper('.swiper2',{
      direction: 'horizontal',
      loop: false,
      //					effect : 'fade',//淡入
      //effect : 'cube',//方块
      //effect : 'coverflow',//3D流
      //					effect : 'flip',//3D翻转
      autoHeight: true,
      onSlideChangeEnd: function(swiper) {
        //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
        var n = swiper.activeIndex;
        setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
        swiper1.slideTo(n, 500, false);
      }
    });
  });
</script>
